<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import echarts from '@/utils/echarts'

const props = defineProps(['options'])
const setoption = ref({})
console.log(props.options)
console.log(444)
setoption.value = props.options
console.log(setoption.value)
const chartRef = ref(null)
let chart = ref()
const resizeHandler = () => {
  chart.value?.resize()
}
onMounted(() => {
  setTimeout(() => {
    initChart(setoption.value)
  }, 20)
  window.addEventListener('resize', resizeHandler)
  console.log(setoption.value)
})

const initChart = (row) => {
  chart.value = echarts.init(chartRef.value)
  chart.value.setOption(row)
}
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
  chart.value?.dispose()
})
</script>
<template>
  <div ref="chartRef" class="my-chart"></div>
</template>

<style lang="scss" scoped></style>
